<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>nXhtml - an Emacs mode for Web Development</title>
    <link href="wd/grapes/nxhtml-grapes.css" rel="StyleSheet" type="text/css" />
    <style type="text/css">
      #special {
          background-color: red;
      }
    </style>
<style type="text/css">


#getit {
    max-width: 800px;
}

#getit span { display: none; }
/* This seems to be impossible with CSS2 since the containing block
   can not be floated. Why did they design it that way?
#getit, #getit dl { display: block; }
#getit a:hover span {
    display: block;
    position: absolute;
    left: 200;
    top: 0;
}
*/

#getit a {
    /* Image */
    display: block;
    background: transparent url("img/getitbuttons.png") 0 0 no-repeat;
    overflow: hidden;
    width: 200px;
    /* Text placement and size, etc */
    text-align: center;
    padding-top: 11px;
    font-size: 12px;
    font-weight: 600;
    padding-bottom: 9px;
    text-decoration: none;
    white-space: nowrap;
    border: none;
}
#getit dt {
    display: block;
    padding: 0;
    margin: 0;
    float: left;
    letter-spacing: 0;
}
#getit a:hover {
    background-position: 0 -35px;
    color: yellow;
}

#useit {
    position: absolute;
    top: 150px;
    left: 100px;
    width: 85px;
    z-index: 100;
    border: none;
    font-size: 9px;
}
/* I can't get rid of the underline. Firefox bug or my bug? */
#useit a { text-decoration: none; }
#useit img {
    text-decoration: none;
    overflow: hidden;
    border: solid 2px #990033;
}
div#useit { text-decoration: none; }
#useit img:hover {
    background: url("img/use-nXhtml-trans2.png") 0 0 no-repeat;
}

#quicklnk a {
    color: #cd3700;
    font-weight: bold;
    font-size: 1.2em;
}
#quicklnk a:hover {
    background-color: yellow;
}

</style>
  </head>
  <body>
      <div id="useit">
        <!-- title is for Firefox -->
        <a href="http://ourcomments.org/Emacs/nXhtml/doc/nxhtml.html"
           title="Get nXhtml for Emacs"
           ><img alt="Get nXhtml for Emacs" src="img/use-nXhtml-trans2.png" width="78" height="29" /></a>
        Above is a little banner you can put on your site if you want to.
      </div>

    <div id="container">
      <div id="hdr">
        <br />
        <span style="color:#FF0;font-size:14px; font-weight: 600;"> <i>&nbsp;Enjoying editing web files!</i> </span>
        <br />
      </div>

      <div id="lftcol">
        <!-- Table of contents BEGIN -->
        <!-- Table of contents min=2 max=3 -->
        <table id="PAGETOC"><tr><td>
          <span class="tochead">On THIS Page:</span>
          <ul>
            <li><a href="#summary">Introduction to nXhtml</a></li>
            <li class="liul"><ul>
              <li><a href="#featsum">Features</a></li>
              <li><a href="#qg">The Quick Guide</a></li>
              <li><a href="#toolset">What you may use more</a></li>
            </ul></li>
            <li><a href="#completion">Completion</a></li>
            <li class="liul"><ul>
              <li><a href="#complex-compl">More Helpful Completion</a></li>
              <li><a href="#ask-compl">But How Do I Ask nXhtml for Alternatives?</a></li>
              <li><a href="#region-compl">The Region and Completion</a></li>
              <li><a href="#errors">And if I Do Not Follow the Advices?</a></li>
            </ul></li>
            <li><a href="#xmlpath">Where am I? - XML Path</a></li>
            <li><a href="#sites">Why it is Useful that nXhtml has Sites</a></li>
            <li><a href="#mlinks">Why the Links Look Like Links</a></li>
            <li><a href="#tocs">Did You Notice the Table of Contents at the Top?</a></li>
            <li><a href="#tidy">But I Can't Use this Cause my Files are HTML</a></li>
            <li><a href="#php">And what about Multiple Modes like PHP?</a></li>
            <li class="liul"><ul>
              <li><a href="#dtd-needed">But I Have no DTD Links in my PHP Files?</a></li>
              <li><a href="#multi-colors">Why Are Colors Different in Multiple Modes?</a></li>
              <li><a href="#part2">More Multiple Modes</a></li>
              <li><a href="#tips-multi">Tips When Using Multiple Modes</a></li>
            </ul></li>
            <li><a href="#file-assoc">File Associations within Emacs</a></li>
            <li><a href="#bloggin">Not for Me, I Am Only Blogging</a></li>
            <li><a href="#bloggin">And Other Goodies...</a></li>
          </ul>
        </td></tr></table>
        <!-- END of Table of contents -->
      </div>

      <div id="getit">
        <dl>
          <dt>
            <a href="http://ourcomments.org/Emacs/nXhtml/tut/tutorials.html" title="Tutorials">Tutorials</a>
          </dt>
          <dt>
            <a href="https://answers.launchpad.net/nxhtml/+faqs" title="nXhtml FAQ">nXhtml FAQ</a>
          </dt>
          <dt>
            <a href="nxhtml-changes.html">News about nXhtml
            <span>Details</span></a>
          </dt>
          <dt>
            <a href="http://www.emacswiki.org/cgi-bin/wiki/NxhtmlMode"
               >nXhtml page at EmacsWiki</a>
          </dt>
          <dt>
            <a id="download" href="http://ourcomments.org/cgi-bin/emacsw32-dl-latest.pl">Download nXhtml</a>
          </dt>
          <dt>
            <a href="https://launchpad.net/nxhtml" title="Bazaar repository">nXhtml at Launchpad</a>
          </dt>
        </dl>
      </div>

      <div id="rgtcol">
        <h1 id="mainheader">nXhtml - Emacs Utilities for Web Development</h1>

        <h2 id="summary">Introduction to nXhtml</h2>
        <p>
          nXhtml is an addon to Emacs for editing XHTML, PHP and similar things.  It is not
          very well-known, but it looks like at least <a
          href="http://drewyates.net/nxml-nxhmtl-emacs-mode-for-ruby-on-rails-rhtml">Drew
          Yates</a> has found it useful:
        </p>
        <blockquote>
          <p style="font-style:italic">
            nXML mode and the subsequent nXHTML mode for emacs are godsends ...
          </p>
        </blockquote>
        <p>
          And that was before I fixed all the bugs ...
        </p>

        <h3 id="featsum">Features</h3>
        <p>
          One of the main parts of nXhtml is nxhtml-mode, a GNU <a
          href="http://en.wikipedia.org/wiki/Emacs">Emacs</a> major
          mode that builds on <a
          href="http://www.thaiopensource.com/nxml-mode/">nxml-mode</a>.
          It knows about XHTML syntax and can check this as
          you type.  It can also tell you what tags and attributes you
          can use at a certain point and help you insert them.
        </p>
        <p>
          That feature, which we call <a
          href="#completion">completion</a>, is one of the main
          features of this mode.  Another important feature is the
          ability to mix several languages in one buffer and get the
          correct syntax highlighting and indentation for each of
          them.
        </p>
        <p>
          In nXhtml this is combined with other features to make it
          more easy to edit web sites (mostly XHTML based but there is
          support for things like PHP too).  Here is a list of important features:
        </p>
        <ul id="sum-ul">
          <li>
            Completion and syntax checking for XHTML.
            <ul>
              <li> Some helpful extensions when completing certain tags (like the &lt;a ...> tag for example).</li>
              <li> When region is visible tag completion will surround the region with the start tag and end tag.</li>
            </ul>
          </li>
          <li>
            Multiple major modes, which means it can handle for example PHP, JSP, eRuby and Django while allowing XHTML completion.
            (Notice however that not all major modes you may need for this comes with nXhtml.)
          </li>
          <li>
            Link handling:
            <ul>
              <li> Easier insertion of tags with links.</li>
              <li> Following links to edit or view.</li>
              <li> Moving between links.</li>
              <li> Moving files and automatically update affected links.</li>
              <li> Copy link to id location and paste it back as a relative link.</li>
              <li> Link checking in current site (local links only)</li>
            </ul>
          </li>
          <li>
            The concept of a site. This is used in many places.  A
            site is here a directory tree with additional properties, like
            remote ftp and http addresses.  A directory could belong to
            many sites.
          </li>
          <li>
            Make a remote copy of site:
            <ul>
              <li> Uploading of single files</li>
              <li> Uploading of whole or part of site</li>
              <li> Editing of remote files.</li>
              <li> Ediff of local vs remote file.</li>
              <li> Easy viewing of local and remote files in web browser.</li>
            </ul>
          </li>
          <li>
            Table of contents
            <ul>
              <li>Creating table of contents for a page.</li>
              <li>Creating table of contents for a site.</li>
              <li>
                Merging of pages and table of contents for a site (see
                example, notice that the table of content easily can be
                navigated using the keyboard).
              </li>
            </ul>
          </li>
          <li> Support for folding.</li>
          <li> Using <a href="http://www.w3.org/People/Raggett/tidy/">Tidy</a> to convert HTML to XHTML.</li>
          <li> Help for XHTML tags and CSS attributes.</li>
          <li> Edit a fragment of an XHTML file (for blogging for example).</li>
          <li> ... and more of course ...</li>
          <!-- <li> Adding a popup menu to [apps] to access these features.</li> -->
        </ul>

        <h3 id="qg">The Quick Guide</h3>
        <p>
          Below are some short notes to get you started using nXhtml.
          (Maybe you should start by taking a look at the
          <a href="http://ourcomments.org/Emacs/nXhtml/tut/tutorials.html" title="Tutorials">Tutorials</a>?)
        </p>
        <dl>
          <dt>GNU Emacs 22 or later</dt>
          <dd>
            <p>
            You need GNU Emacs 22 (which was released 2007-06-02) or later.
            </p>
          </dd>
          <dt>Installation</dt>
          <dd>
            <ul>
              <li>
                Download nXhtml as a zip file <a href="http://ourcomments.org/cgi-bin/emacsw32-dl-latest.pl">here</a>
                or download
                <a href="http://ourcomments.org/Emacs/EmacsW32.html">EmacsW32</a>.
              </li>
              <li>
                If you got nXhtml with <a
                href="http://ourcomments.org/Emacs/EmacsW32.html">EmacsW32</a>
                you should use the menus <em>Options - Customize
                EmacsW32</em> and there just set <em>nxhtml-load</em>.
              </li>
              <li>
                If you downloaded the zip file with nXhtml then unzip it anywhere and
                then follow the instructions in
                <em>nxhtml/README.txt</em>.
              </li>
            </ul>
            <p>
              After this files with extensions for example .html will open in nxhtml-mode.
            </p>
            <p>
              To make nXhtml run faster you can also byte compile the files.
              You do that with <i>M-x nxhtmlmaint-start-byte-compilation</i>.
            </p>
          </dd>

          <dt id="nxhtml-menu">The nXhtml Menu</dt>
          <dd>
            <p>
              To reach many of the features in nXhtml you can use the
              <b>nXhtml menu</b>.  If you do not see that when in a buffer
              then you can always do <em>M-x nxhtml-minor-mode</em> which
              will turn it on (or off) for that buffer.
            </p>
            <p>
              But please notice also the <b>XML menu</b> which
              contains the nXml menu! (Remember that nXhtml is based
              on nXml.) When you are using nxhtml-mode this menu is
              visible when you are in the XHTML parts of a buffer.
            </p>
          </dd>

          <!-- <dt id="turn-on-some">Turn on Some Things</dt> -->
          <!-- <dd> -->
          <!--   <p> -->
          <!--     There is a good chance that you want to turn on some -->
          <!--     things that makes nXhtml work more automatic. They are -->
          <!--     in the <a href="#nxhtml-menu">nXhtml menu</a> for -->
          <!--     turning them on temporarily.  Later, when you have -->
          <!--     tested, you may want to turn them on permanently, which -->
          <!--     you can do from the menus by choosing <em>nXhtml - -->
          <!--     nXhtml Help and Setup - Quick Customize nXhtml</em>. -->
          <!--   </p> -->
          <!-- </dd> -->

          <dt>XHTML Completion and Validation</dt>
          <dd>
            <p>
              nXhtml knows a good deal about XHTML tags and attributes when you are using <em>nxhtml-mode</em>.
              It can assist you in different ways:
            </p>
            <ul>
              <li>
                Completion
              </li>
              <li>
                Validation
              </li>
            </ul>
            <p>
              <b>Completion</b> means that you ask Emacs to give you choices to complete what you are currently writing.
              For example you may have written &lt;b and want to know what tags beginning this way can actually be used at that place in the document.
              You ask Emacs in nxhtml-mode this by calling the function nxml-complete.
              This is normally bound to M-Tab.
            </p>
            <p>
              On some systems, for example MS Windows with an
              unpatched Emacs this is inconvenient and clashes with
              Alt-Tab that the window manager uses. There is however a
              little utility that comes with nXhtml that let you use
              just Tab for completion, <i>tabkey2-mode</i>. Turn this on with
            </p>
            <p style="padding-left:2em;">
              M-x tabkey2-mode
            </p>
            <p>
              After this the first Tab press will still do
              indentation, but the second can do completion.
            </p>
            <p>
              <b>Validation</b> means checking that what you have
              written in nxhtml-mode follows the XHTML specifications.
              If it does not there will be a red underline at the
              places where something is wrong.  To see what is wrong
              move to this (for example with C-c C-n). A message in
              the minibuffer will tell you the error.
            </p>
            <p>
              Notice that the modeline also tells if the document is
              valid. Most of the times it will however say
              <em>Invalid</em> maybe just because you are editing and have
              not yet finished.
            </p>
            <p>
              For files mixing XHTML with codes, like PHP, you can use
              something I call <a href="#dtd-needed">Fictive XHTML
              Validation Headers</a>.  That allows you to use XHTML
              completion even if those files does not have the XHTML
              headers needed.
            </p>
          </dd>
          <dt>Multiple Major Modes</dt>
          <dd>
            <p>
              nXhtml can automatically divide the buffer into chunks
              with relevant different major modes (i e languages, like
              PHP, XHTML etc). This is useful for editing PHP,
              JSP, eRuby, Django and similar. See <a href="#php">And
              what about Multiple Modes like PHP?</a> for more information.
            </p>
          </dd>
          <dt>Links</dt>
          <dd>
            <p>
              The links you put in your XHTML documents actually works
              like links with nxhtml-mode too. To follow a link you
              can use <em>C-c RET RET</em>.  (There are other
              possibilities too, they all begin with <em>C-c RET</em>.)
            </p>
          </dd>
          <dt>Sites and Uploading</dt>
          <dd>
            <p>
              If you want to upload your XHTML files, image files etc
              you can do that from within Emacs.  There are entries
              for this in the <a href="#nxhtml-menu">nXhtml menu</a>.
            </p>
          </dd>
          <dt>Keyboard shortcuts (aka keybindings in Emacs)</dt>
          <dd>
            <p>
              When you start to use a new program you often wonder
              about which keybindings there are to use.  If you have
              not used Emacs before you may feel quite lost because
              you have looked in all documentation and you have not
              seen any list of keybindings.
            </p>
            <p>
              Well, that is how it often is in Emacs. Get use to it ...
            </p>
            <p>
              But do not panic. Because there is help, probably even
              better than you are used to - in Emacs dynamic help
              system. A help system that change if you for example add
              a keybinding yourself.  Try the command <i>C-h b</i> (or <i>F1
              b</i>). This list all the keybindings (in their priority
              order) that are active where you are in Emacs.
            </p>
            <p>
              You can also try <i>C-h m</i> which gives information about
              minor modes and the current major mode. There is
              sometimes information about the keybindings there too.
            </p>
          </dd>
          <dt>Some More You Can Do ...</dt>
          <dd>
            <p>
              See <a href="#summary">Introduction</a> above.
              Look into the <a href="#nxhtml-menu">nXhtml menu</a>.
              And then of course learn some of all the things you can do using the power of Emacs.
            </p>
          </dd>
        </dl>
        <p>
        </p>
        <h3 id="toolset">What you may use more</h3>
        <p>
          If find it very conventient to combine nXhtml with Firefox
          add-on Firebug. I think Firebug is very handy for finding CSS
          problem.
        </p>
        <p>
          <a href="http://www.spreadfirefox.com/node&id=0&t=306"><img border="0"
          alt="Firefox 3" title="Firefox 3"
          src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox3/110x32_get_ffx.png"/></a>

          <a href="http://www.getfirebug.com/?link=2" title="Firebug
          is a free web development tool for
          Firefox"><img src="http://www.getfirebug.com/images/firebug2.png"
          border="0" alt="Firebug - Web Development Evolved"/></a>
        </p>
        <p>
          And of course, another good resource is Russ Weakley's <a
          href="http://css.maxdesign.com.au/">CSS-based tutorials</a>.
          Russ co-chairs the <a
          href="http://webstandardsgroup.org/">Web Standards Group</a>
          and seems to know this well.
        </p>
        <p>
          I am sure you know about it, but just in case, here is WDG's
          <a href="http://htmlhelp.com/design/accessibility/">Guide to Accessibility</a>
          and their
          <a href="http://htmlhelp.com/design/accessibility/tips.html">Accessibility Tips</a>.
        </p>

        <h2 id="completion">Completion</h2>
        <div align="right">
          <img align="right"
               src="img/popup-compl.png"
               alt="Popup menu style completion"
               title="Popup menu style completion"
               style="border: thin dotted #00ff00;
                      margin-left: 2em;
                      margin-top: 0em;
                      margin-bottom: 1em;"
               width="371" height="483" />
        </div>
        <p>
          Completion in nXhtml Mode lets you ask Emacs <i>"What can I
          type here?"</i>.  The most important part, the content, can
          Emacs not help you with yet.  However when it comes to XHTML and
          such things that you really want to get past as easy as
          possible, then nXhtml mode can assist you.
        </p>
        <p>
          Perhaps you wonder with <i>"With what?"</i> Well, completion
          works like this: You position point in your XHML file where you
          want to write.  Now you ask nXhtml what XHTML code you can
          write there.  nXhtml may answer that it can't help you, that
          happens in some cases.
        </p>
        <p>
          But most often nXhtml can help you. It knows about tags and
          where they fit, and it knows about tag attributes.  When nXhtml
          can helpt you it will give you choices you can select from.  It
          may display the choices in a popup menu like in the pictures to
          the left, or it may use something like the picture below shows.
          It is actually exactly the same question that is asked in these
          two cases.  You decide by <i>customizing</i> nXhtml mode in Emacs which
          way it should display the choices.  The way below is the
          standard Emacs way to do display choices.  It is fast once you know it, but
          the popup menus are of course more familiar to computer users
          today.
        </p>
        <img alt="Emacs style completion" src="img/emacs-style-completion.png" width="456" height="406"
             />
        <p>
          That far nXhtml can take you because it knows the DTD for XHTML.
          (You may wonder about different versions of XHTML, more about that later.)
        </p>

        <h3 id="complex-compl">More Helpful Completion</h3>
        <p>
          For certain attributes nXhtml knows their values because the DTD just allows certain values.
          For some other attribute values for which nXhtml can know little
          from the DTD alone, like links (src and href attributes) nXhtml
          can also be helpful.  If you want a link to a file, for example,
          nXhtml lets you browse for the file and then inserts a relative
          link to it. It can also look for anchors (ie <b>id</b> attributes).
        </p>
        <p>
          In some cases nXhtml knows more about a tag.
          From the DTD it knows that an <b>&lt;img></b> tag should have a <b>src</b> attribute with a value that points to an image.
          Therefor it prompts you for the value of the src attribute.
          It is the same with the <b>alt</b> attribute that is required.
          It even gets the height and width of an image on file if it can and inserts the attributes in the &lt;img> tag.
        </p>
        <p>
          Well, it is better that you test (and perhaps give some feedback?).
        </p>
        <p>
          Normally nXhtml does not care that much. It just tells you that
          you when you have broken the DTD rules.  If however you want
          nXhtml to do less or more of this kind then you can change the
          variable <b>nxhtml-complete-tag-do-also</b> - but that requires
          that you knows Emacs lisp.  If you do write something useful for
          this, please tell me.
        </p>

        <h3 id="ask-compl">But How Do I Ask nXhtml for Alternatives?</h3>
        <p>
          Oh, I nearly forgot. Do you wonder how to ask nXhtml in Emacs for completion alternatives?
          That is a nice question to answer.
          You give a certain command to Emacs to ask for this.
          That can be done by either:
        </p>
        <ul>
          <li>Type <i>M-Tab</i></li>
          <li>Do it from the <a href="#nxhtml-menu">nXhtml menu</a>: <i>nXhtml - Completion - Complete tag, attributes etc</i></li>
          <li>Or more explicit with a command: <i>M-x nxml-complete</i></li>
        </ul>
        <p>
          You can change <i>M-Tab</i> to whatever you want.  What it
          means? Ah, yes, it means <i>"hold down the Meta key and press
          Tab"</i>.  That is Emacs jargon and you have to know which key
          is the Meta key of course.  I actually use the left Windows key
          on my keyboard for Meta.  See <a
          href="http://ourcomments.org/Emacs/EmacsW32.html">EmacsW32 home
          page</a> for some information about this if you are on MS
          Windows.
        </p>

        <h3 id="region-compl">The Region and Completion</h3>
        <p>
          This is a small but useful thing (and I added it because some people liked it, it
          was not my own idea): If some text is selected (in Emacs jargon
          "if region is active and hilighted") and you use completion to
          insert a tag then the <em>region will be surrounded by that tag</em>.
          If region is active like here:
        </p>
        <img alt="Region is selected" src="img/region-selected.png" width="584" height="50"
             style="border: thin dotted #00ff00;
                    vertical-align: top;
                    margin-bottom: 1em;" />
        <p>
          And you then ask for completion:
        </p>
        <img alt="Ask for tag" src="img/region-selected-completion.png" width="584" height="393"
             style="border: thin dotted #00ff00;
                    vertical-align: top;
                    margin-bottom: 1em;" />
        <p>
          The result will be that your choice (<em>em</em> here) will surround the region you had selected:
        </p>
        <img alt="After completion" src="img/region-selected-after.png" width="584" height="61"
             style="border: thin dotted #00ff00;
                        vertical-align: top;
                        margin-bottom: 1em;" />
        <p>
          Eh? Ah, yes, you are right. I happened to choose the wrong picture for the result. Sorry.
        </p>

        <h3 id="errors">And if I Do Not Follow the Advices?</h3>
        <p>
          nXhtml gives you advices about how to handle the XHTML tags, but
          it does not force you to follow them.  You can write whatever
          you want, but nXhtml anyway observes what you are doing and
          checks the XHTML code.  If you do not follow the DTD rules
          nXhtml will silently warn you with a red underline, like here
          (where I have written <i>image</i> instead of <i>img</i>):
        </p>
        <img alt="Validation error marking" src="img/validation-error.png" width="375" height="50"
             style="border: thin dotted #00ff00;"
             />
        <p>
          (Oh, geeh. Firefox took that before, but not now ...)
        </p>

        <h2 id="xmlpath" style="clear:both">Where am I? - XML Path</h2>

        <p>
          If you have for example &lt;div> tags to separate things or long
          list you may wonder in which of those you are.  Nxml Mode can
          show this. Look in the menus <i>XHTML - XML Path</i> to turn it
          on. Here is what it looks like. There is header with the label <i>Path:</i> which here shows that we are in a list with id="sum-ul".
          Note also the yellow color of the tag we are in. The whole path up to the top is colored this way.
        </p>
        <img alt="Showing XML Path" src="img/nxml-where.png" width="456" height="262" />
        <p>
          A little tip: I found this very useful when I looked at different CSS designs.
        </p>

        <h2 id="sites">Why it is Useful that nXhtml has Sites</h2>
        <p>
          I am writing this in nXhtml mode in Emacs.  Just after I had
          written a piece or added an image on my pc I update the web
          pages on http://OurComments.org/.  I do that very easily because
          of the concept of a site.
        </p>
        <p>
          A <b>site in nXhtml</b> is in its simplest form just a local directory tree.
          And that is given a name.
          In my case I have given it the name <i>nxhtml-doc</i> just to remember what it is about.
        </p>
        <p>
          To that site I have also added information about uploading and
          and the http address of the uploaded files.  Now if I add an
          image to the site on my pc all I have to do to upload it to the
          web site is to open the image in Emacs (yes that is possible,
          Emacs knows about the most common image formats) and then just from the menus choose
          <i>Web Site - File Transfer - Upload Single File</i>.
          That is all.
        </p>
        <p>
          And then I can (from the XHTML file I am editing) use the
          command <i>XHTML - File Transfer - View Uploaded File</i> to
          check that the web page is ok.
        </p>

        <h2 id="mlinks">Why the Links Look Like Links</h2>
        <p>
          As soon as you open an XHTML file in nXhtml mode you will notice that the links you enter looks like links.
          They are underlined and blue like in a web browser.
          You may think that that is kind of nice, but why do they look like that?
        </p>
        <p>
          It is just because they are links.  You access them a little bit
          different in a web browser, just so that it does not interfere
          with editing.  And because you may want to do different things
          with them.  Take a look at the picture below.  I have positioned
          point to a link and then pressed tha App key on my keyboard.
          That pops up a menu where I can see what I can do with the link:
        </p>
        <img alt="Link with popup menu" src="img/links-appmenu.png" width="529" height="189"
             style="border: thin dotted #00ff00;"
             />
        <p>
          As you can see I can copy the link (maybe not that useful
          often). I can open it - and that means edit the linked file in
          Emacs. That is useful.  And then I can view the linked file in a
          web browser. Can be useful too.
        </p>
        <p>
          And then I can move between the links.
        </p>
        <p>
          All this is useful, at least for me.  But there are some more
          things, in the menus <i>XHTML - Links</i>.  Check them out, you
          may like them. They may save you time.
        </p>

        <h2 id="tocs">Did You Notice the Table of Contents at the Top?</h2>
        <p>
          Well, you should notice not because it exactly is the worlds
          most pretty table of content.  But because it is there.  And I
          did not write it.  nXhtml mode wrote it for me.
        </p>
        <p>
          How it works? Just put <b>id</b> attributes on your header tags
          (h1-h6).  Then position point where you want the table of
          contents.  Tell nXhtml mode to write it by using the menus
          <i>XHTML - Table of Contents</i>.
        </p>
        <p>
          When you want to change it just ask nXhtml mode to rewrite it.
        </p>
        <p>
          And you can make it more pretty if you are good at CSS.
        </p>

        <h2 id="tidy">But I Can't Use this Cause my Files are HTML</h2>
        <p>
          That is a problem of course.  You need to convert them to XHTML
          because that is what the browsers and all other tools are best
          at today.
        </p>
        <p>
          But don't worry.  Didn't I tell you that nXhtml knows about <a
          href="http://tidy.sourceforge.net/">Tidy For XHTML</a>?  (It
          even comes together with nXhtml if you get it with EmacsW32.)
        </p>
        <p>
          Tidy can convert your HTML files to XHTML.
          Just open a file in nXhtml mode then use the <i>Tidy</i>
          menu and choose what you want to do there.
        </p>
        <p>
          If you do it file-by-file you can compare the "tidied" XHTML
          version of the file and your old version side by side (using
          Emacs Ediff command actually - an interactive way to compare).
          You can also tidy a whole directory tree at once.
        </p>

        <h2 id="php">And what about Multiple Modes like PHP?</h2>
        <p>
          nXhtml mode can handle multiple modes in a buffer.  The
          benefits of nXml style completion can still be used.  This
          can even be done when there is no header in the file that
          tells what DTD to use for the completion.
        </p>
        <p>
          Mumamo, which is part of nXhtml, implements what it
          calls <i>multi major modes</i> for handling multiple major
          modes in a buffer.  Instead of turning on a major mode for a
          buffer you turn on a multi major mode and Mumamo will handle
          the rest.  Multi major modes has names like nxhtml-mumamo,
          html-mumamo, django-nxhtml-mumamo etc.
        </p>
        <p>
          When point is in a PHP part then the major mode is switched
          to php-mode, with all that means.  Here you can see how that
          looks:
        </p>
        <img alt="In PHP part" src="img/php-in-nxhtml.png" width="448" height="294" />
        <p>
          If you move the point outside of those &lt;?php ... ?&gt; areas
          then the mode is automatically switched to nxhtml-mode
          instead.  Now you can use the power of nxhtml-mode and
          do for example completion, like here:
        </p>
        <img alt="In XHTML part" src="img/php-in-nxhtml-2.png" width="450" height="294" />
        <p>
          The switching is done with a short delay so that it does not
          interfere with your normal editing. That's it. (But maybe
          there should be a better php-mode?  Does someone has any
          better than the one that comes with nXhtml now?)
        </p>

        <h3 id="dtd-needed">But I Have no DTD Links in my PHP Files?</h3>
        <p>
          Ah, yes. Good question. You are right. nXhtml mode needs a
          DTD to be able to help you with XHTML and completion.  I
          thought it was impossible for a normal human to get that
          working.
        </p>
        <p>
          But it turned out to be surpricingly simple and it works
          quite nicely now.  The first time you do completion of XHTML
          code in a buffer where you do not have the needed XHTML
          headers nXhtml mode will ask you for what it calls a
          <em>fictive XHTML validation header</em>.  After that completion
          should work as usual.  A fictive XHTML validation header in nXhtml
          mode is something that is used in the background for
          validation. It is not inserted in the buffer, but may be shown on the screen like this:
        </p>
        <img alt="fictive XHTML validation header" src="img/xml-validation-header.png" width="448" height="374" />
        <p>
          nXhtml does its best to guess what fictive XHTML Validation Header
          the buffer needs, but if the default fictive XHTML validation header
          does not fit you can customize the choices.
        </p>
        <p>
          Note: Do not try to set the XML schema directly when the XHTML
          headers are missing in the buffer. Use a fictive XHTML
          validation header instead.
        </p>

        <h3 id="multi-colors">Why Are Colors Different in Multiple Modes?</h3>
        <p>
          It has been necessary to replace the nxml-mode style
          fontification with the sgml-mode style.  All other features
          of nXml/nXhtml modes should still work however.
          In all other cases the normal fontification colors are used.
        </p>
        <p>
          Or perhaps you mean the background colors? These are just a
          visual aid about the dividing into chunks with different
          major modes and they can be turned off. Do <em>M-x
          customize-group RET mumamo RET</em>.
        </p>

        <h3 id="part2">More Multiple Modes</h3>
        <p>
          nXhtml mode handles for example embedded style sheets the
          same way as it handles PHP chunks:
        </p>
        <!--
        <img alt="CSS embedded in XHTML" src="img/embedded-xhtml.png" width="448" height="294" />
        -->
        <img alt="CSS embedded in XHTML" src="img/style-in-nxhtml.png" width="448" height="278" />
        <p>
          Currently it can handle PHP, CSS, JavaScript, eRuby, JSP and
          some other minor cases.  If you can program in elisp it is
          not a very big deal adding support for other embedded
          languages.  (I do not use all the languages above myself so
          please give me feedback if there is something you think
          could be done better.)
        </p>
        <p>
          Please notice also that each major mode handles completion
          in its own ways.  The popup style completion is currently
          only used by nXhtml mode, not the other major modes even if
          they are on the same page.
        </p>
        <p>
          The use of multi major modes is not constrained to nXhtml.
          You can use that when editing other files too. To see what
          multi major modes are currently defined in your Emacs
          session see the
          variable <i>mumamo-defined-turn-on-functions</i>.
        </p>

        <h3 id="tips-multi">Tips When Using Multiple Modes</h3>
        <p>
          The routines dividing into chunks with different major modes is not that very supersmart.
          They do not know much about the languages of the major modes.
          So if you write something like this:
        </p>
        <pre>
          &lt;?php
            echo '&lt;'?xml version="1.0" encoding="utf-8"?'>';
          ?&gt;
        </pre>
        <p>
          it will get very, very confused. If you are not fond of that
          you better write it like this instead:
        </p>
        <pre>
          &lt;?php
            echo '&lt;'; echo '?xml version="1.0" encoding="utf-8"?'; echo '>';
          ?&gt;
        </pre>
        <p>
          For a similar problem <a href="nxhtml-changes.html#php-attribute-values">attribute values computed by PHP</a>.
        </p>
        <p>
          When editing PHP sometimes the validation of the XHTML part
          gets quite upset.  You may even think that it is unuseful
          (since trying to complete gives you nothing), but it is not.
          Here is what you can do:
        </p>
        <ul>
          <li>
            Turn on <em>Fictive XHTML Validation Header</em> from
            menus. (In <em>nXhtml - Completion</em>.)  That will try
            to guess a how to start validation. It shows a fictive
            header at the top of the buffer to show you what is goind
            on (nothing is inserted in the buffer).
          </li>
          <li>
            If you do not think the red underlines you get are very
            pretty then you can hide them.  Use the menus again,
            <em>Hide Validation Errors</em>.
          </li>
        </ul>
        <p>
          And maybe you do not think the background colors when using
          Multiple Major Modes is very smart?  Then just go ahead and
          remove them. Customize.
          <em>M-x customize-group RET mumamo RET</em>.
        </p>

        <h2 id="file-assoc">File Associations within Emacs</h2>
        <p>
          Some file associations are changed within Emacs to get
          multiple modes to work without requiring the user to do
          anything.  Good for a new user I guess, but I understand
          that old Emacs users may want more control over this.  If
          you are one of them then please look in
          <em>nxhtml-autoload.el</em> which is where the associations
          are made.
        </p>

        <h2 id="bloggin">Not for Me, I Am Only Blogging</h2>
        <p>
          Not for you?
          Ah, wait a minute.
          Blogging, that is exactly one of the things that I myself use this for.
        </p>
        <p>
          When you blog you only write part of an XHTML page, so you
          may think that all the nicities of nXhtml mode like
          validation and completion does not work.  They do.  (If you
          wonder how, then please read <a href="#dtd-needed">But I
          Have No DTD Links In My PHP Files</a>. Though you do not
          have to read this to start using nXhtml for writing blog
          texts and comments.)
        </p>
        <p>
          The setup for blogging is simple
        </p>
        <ol>
          <li>
            <a href="http://www.mozilla.com/en-US/firefox/">Firefox</a> - which you of course already use ...
          </li>
          <li>
            The <a href="https://addons.mozilla.org/en-US/firefox/addon/4125">It's All Text</a> add-on to Firefox.
            It should use Emacs client:
            <p>
            <img alt="It's All Text preferences" src="img/itsalltext-pref.png" width="371" height="352" />
            </p>
          </li>
          <li>
            And finally: Customize the little elisp library that comes with nXhtml:
            <p style="padding-left:2em; font-size: 1em; font-weight: 600;">
                      M-x customize-group RET as-external RET
            </p>
            You just need to turn <i>as-external</i> on there.
          </li>
        </ol>
        <p>
          With this setup you just press F2 in any text area in
          Firefox and then you got the text to edit in Emacs - using
          nXhtml for completion etc. Finish and save with <b>C-x
          #</b>.
        </p>

<!--         <img alt="Edit part of an XHTML file" src="img/edit-part.png" width="448" height="390" /> -->

        <h2 id="bloggin">And Other Goodies...</h2>
        <p>
          There are a lot of other things in the package too, please
          see the nXhtml menu in Emacs.  You can for example find a
          n-back-game (if you do not know what it is now, do not
          worry, just try it and you will learn - and understand why I
          put it there).
        </p>
      </div>

      <hr align="left" class="footer" />
      <p class="footer">
        Copyright &copy; 2008 OurComments.org
        <br style="margin:0; padding:0; line-height: 0;" />
        Design thanks to <a href="http://www.oswd.org/">OSWD</a>
        <br />
      </p>
    </div>
  </body>
</html>
